<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<%--<link rel="icon" href="../../favicon.ico">--%>
		<title>注册</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<!-- 页面的title图片 -->
		<link rel="icon" sizes="192x192" href="images/title_logo.bmp" src="title_logo.bmp"  type="image/png" />
		<script>
			$(function() {
				$("#username").blur(function() {
                    if($(this).val() == "") {
                        $("#span1").html("<p id='p1' class='error' style='color: red'>用户名不能为空</p>");
                    }else{
                        //检查用户是否已经被占用
                        $.ajax({
                            url : "/user/check/"+escape($("#username").val())+"/1?r=" + Math.random(),
                            success : function(data) {
                                if (data.data) {
                                    //用户名可用
                                    $("#p1").remove();
                                } else {
                                    $("#span1").html("<p id='p1' class='error' style='color: red'>此用户名已经被占用，请选择其他用户名！</p>");
                                    /*alert("此用户名已经被占用，请选择其他用户名");*/
                                    $("#username").select();
                                }
                            }
                        });
                    }
				});
				$("#email").blur(function() {
				    // 邮箱正则
				    var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
				    var str = $(this).val();
                    if(!reg.test(str)) {
						$("#span2").html("<p id='p2' class='error' style='color: red'>邮箱格式不正确</p>");
					}else{
                        $.ajax({
                            url : "/user/check/"+$("#email").val()+"/3?r=" + Math.random(),
                            success : function(data) {
                                if (data.data) {
                                    $("#p2").remove();
                                } else {
                                    $("#span1").html("<p id='p2' class='error' style='color: red'>此手机号已经被注册！</p>");
                                    /*alert("此手机号已经被注册！");*/
                                    $("#phone").select();
                                }
                            }
                        });
                    }
				});
				$("#password").blur(function() {
					if($(this).val() == "") {
						$("#span3").html("<p id='p3' class='error' style='color: red'>密码不能为空</p>");
					}else{
                        $("#p3").remove();
                    }
				});
				$("#rePassword").blur(function() {
				    var password = $("#password").val();
				    var rePassword = $(this).val();
					if(password != rePassword) {
						$("#span4").html("<p id='p3' class='error' style='color: red'>两次密码不一致</p>");
					}else if(rePassword == "") {
                        $("#span4").html("<p id='p3' class='error' style='color: red'>密码不能为空</p>");
                    }else{
                        $("#p3").remove();
                    }
				});

				$("#register").click(function () {
				    $(".form-control").each(function () {
						$(this).blur();
                    });
				    var flag = false;
                    $(".error").each(function () {
                        if($(this).text() != null) {
                            flag = true;
						}
                    });
					if(flag == false) {
                        $("#registerForm").submit();
					}
                });

			});
		</script>
	</head>

	<body>
		<!--http://litta.co/wp-content/uploads/2017/06/homescreen.jpeg-->
		<div class="container-fluid" style="background-image: url(https://vipp.com/sites/default/files/vipp-17-pedal-bin-frontpage.jpg);padding-top: 200px;padding-bottom: 323px;">
			<div class="row col-sm-2 col-md-2  col-lg-2 panel pull-right"  style="background-color: white;margin-right: 15%;">
				<h1 style="padding-top: 20px; padding-bottom: 20px;"><font face="symbol"><p class="text-center">注册账号</p></font></h1>
				<form id="registerForm" action="/user/register" method="post">
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="username" >用户名:</label>--%>
						<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
						<span id="span1"></span>
					</div>
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="email">邮	箱:</label>--%>
						<input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
						<span id="span2"></span>
					</div>
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="password">密	码:</label>--%>
						<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
						<span id="span3"></span>
					</div>
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="rePassword">确认密码:</label>--%>
						<input type="password" class="form-control" id="rePassword" name="rePassword" placeholder="请再次输入密码">
						<span id="span4"></span>
					</div>
					<div class="col-sm-12 col-md-12  col-lg-12">
						<button id="register" type="button" class="btn btn-success col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 20px;">立即注册</button>
					</div>
				</form>

			</div>
		</div>
	</body>

</html>